import React from "react";
import { DragSourceMonitor, useDrag } from "react-dnd";

interface IDragWrapperProps {
  type: string;
  itemData?: any;
  onDragEnd?: (itemData: any, monitor: DragSourceMonitor) => any;
  className?: string;
  style?: React.CSSProperties;
}
const DragWrapper: React.FC<IDragWrapperProps> = ({ type, itemData, onDragEnd, className, style, children }) => {
  const [{ isDragging }, drager] = useDrag({
    type,
    item: itemData,
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
    end: onDragEnd
  });
  return <div className={`v-drag-wrapper ${className}`} style={{opacity: isDragging ? 0.6 : 1, cursor: "move", ...style}} ref={drager}>{ children }</div>
}

export default DragWrapper;